<template>
  <div class='columns-manage'>
    <column-item v-for="item in columnList" :column="item" :key="item.id"></column-item>
    <div class="create-container">
      <div class="create-module">
        <div @click="createColumn(1)" class="publish-btn" :class="{disable:this.hasPublish}">
          <span class="icon iconfont">&#xe664;</span>
          <span class="word">新建期刊专栏</span>
        </div>
        <div class="create-desc">
          <span class="tip">创建前，请与公开课运营确认专栏类型。</span>
          <span class="desc">期刊专栏：专栏内容采用固定频率更新，用户购买按照时间段购买内容，比如购买2017年2月21日~2018年2月20日内发布的内容。在此种专栏类型下，作者可以在此专栏内创建多个时段。</span>
        </div>
      </div>
      <div class="create-module">
        <div @click="createColumn(2)" class="publish-btn" :class="{disable:this.hasPublish}">
          <span class="icon iconfont">&#xe664;</span>
          <span class="word">新建课程专栏</span>
        </div>
        <div class="create-desc">
          <span class="tip">创建前，请与公开课运营确认专栏类型。</span>
          <span class="desc">课程专栏：内容为一系列课程，已整个课程包的形式售卖，与期刊专栏的区别是，没有时间段的的概念，用户购买整个课程包。课程专栏类型下，一个专栏仅能创建一个课程包。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as types from '../../../store/mutation-types';
import columnItem from './ColumnsItem.vue';

export default {
  name: 'columnsManage',
  components:{
    "column-item":columnItem
  },
  created(){
    this.$store.dispatch('loadColumnList');
  },
  computed:{
    columnList() {
      return this.$store.state.column.columnList;
    },
    hasPublish() {
      let ret = false;
      this.columnList.forEach((item)=>{
        if(item.status == 2 || item.status == 1 || item.status == 0){
          ret = true;
        }
      });

      return ret;
    }
  },
  methods:{
    createColumn(type){
      this.$store.dispatch('createInfo').then(() => {
        this.$router.push('/columns/create/info/'+type);
      }).catch((e) => {
        console.log(e);
      });
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@font-face {
  font-family: "iconfont";
  src: url('../../../font/create-iconfont.eot?t=1476171328');
  /* IE9*/
  src: url('../../../font/create-iconfont.eot?t=1476171328#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../../../font/create-iconfont.woff?t=1476171328') format('woff'), /* chrome, firefox */
  url('../../../font/create-iconfont.ttf?t=1476171328') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../../../font/create-iconfont.svg?t=1476171328#iconfont') format('svg');
  /* iOS 4.1- */
}
.column-container{
  width: 100%;
  height: 220px;
  margin-bottom: 50px;
  background: #91c4a6;
  .column-info{
    width: 530px;
    height: 100%;
    float: left;
    padding: 25px;
    box-sizing:border-box;
    position: relative;
    &:after{
      content:"";
      display: inline-block;
      width: 1px;
      height: 140px;
      background: #fff;
      position: absolute;
      right: 0;
      top: 40px;
    }
    span{
      color: #fff;
      display: block;
    }
    .column-type{
      font-size: 20px;
    }
    .column-title{
      font-size: 32px;
      line-height: 150%;
    }
    .column-subscription{
      font-size: 20px;
    }
    .column-status{
      width: 100px;
      background: rgba(0,0,0,.2);
      font-size: 23px;
      margin-top: 30px;
      position: absolute;
      left: 25px;
      bottom: 25px;
      line-height: 40px;
      text-align: center;
    }
  }
  .column-operation{
    width: 430px;
    box-sizing:border-box;
    float: left;
    height: 100%;
    padding: 40px 20px;
    .operation-btn{
      width: 130px;
      padding: 20px 0;
      float: left;
      text-align: center;
      cursor: pointer;
      &:hover{
        background:rgba(255,255,255,.1);
      }
      .iconfont{
        display: block;
        color: #fff;
        font-size: 60px;
      }
      .word{
        display: block;
        color: #fff;
        font-size: 20px;
        margin-top: 10px;
      }
    }
  }
}

.create-module{
  float: left;
  width: 49%;
  height: 100%;
  &:first-child{
    margin-right: 2%;
  }
  .publish-btn {
    width: 100%;
    height: 100%;
    background: rgba(46,144,87,1);
    border-radius: 4px;
    text-align: center;
    transition: .25s;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    &.disable{
      pointer-events:none;
      cursor: not-allowed;
      background: rgba(46,144,87,.2);
    }
    &:hover{
      background: rgba(46,144,87,.8);
    }
    &:active{
      background: rgba(46,144,87,1);
    }
    .icon {
      display: inline-block;
      color: #fff;
      font-size: 25px;
      margin-right: 10px;
    }
    .word {
      display: inline-block;
      font-size: 28px;
      color: #fff;
      line-height: 125px;
    }
  }
  .create-desc{
    width: 100%;
    text-align: justify;
    margin-top: 20px;
    line-height: 120%;
    .tip{
      color: #FF6A6A;
      display: block;
      margin-bottom: 10px;
    }
    .desc{
      color: #888;
    }
  }
}
</style>
